import { Alert } from '@aws-amplify/ui-react';
import { Example } from '@/components/Example';
import { CustomizationCdn } from './CustomizationCdn';

## Custom CDN

FaceLivenessDetector allows overriding the default hosted CDN and providing your own. The CDN files are used by the TensorFlow library to load in files at runtime. You can host your own CDN by following the instructions below:

1. Download the TFJS wasm and blazeface files:
    - Download the wasm file for tfjs here: https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-wasm@3.11.0/dist/tfjs-backend-wasm-simd.wasm
    - Download https://tfhub.dev/tensorflow/tfjs-model/blazeface/1/default/1 and unzip the tar file. It should contain a `model.json` file and a `group1-shard1of1.bin` file.
1. Host all three files alongside your JS files on your own server
1. Update FaceLivenessDetector code:

```tsx file=./CustomizationCdn.tsx
```

<Alert role="none" variation="warning">
`binaryPath` must be a path to a folder with `tfjs-backend-wasm-simd.wasm` but should not include the file name. `faceModelUrl` must point to the `model.json` file and will also expect the `group1-shard1of1.bin` file is colocated in the same path.  
</Alert>